<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane v-if="$store.getters.role === 1" label="全部试题" name="0" />
      <el-tab-pane
        v-if="$store.getters.role === 2 && ($store.getters.permission & 1) > 0"
        label="我的编辑"
        name="1"
      />
      <el-tab-pane
        v-if="$store.getters.role === 2 && ($store.getters.permission & 2) > 0"
        label="我的校验"
        name="2"
      />
      <el-tab-pane
        v-if="$store.getters.role === 2 && ($store.getters.permission & 4) > 0"
        label="我的审核"
        name="3"
      />
    </el-tabs>
    <div class="filter-container">
      <el-form
        :model="query"
        :inline="true"
        size="mini"
        label-position="right"
        label-width="70px"
      >
        <el-form-item label="试卷名称">
          <el-input
            v-model="query.title"
            placeholder="试卷名称"
            suffix-icon="“xxxx”"
          />
        </el-form-item>
        <el-form-item label="试卷类型">
          <el-select v-model="query.dataType" clearable>
            <el-option label="模拟卷" value="1" />
            <el-option label="真题卷" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-select v-model="query.type" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属学科">
          <el-select v-model="query.subject" clearable>
            <el-option
              v-for="subjectType in subjectTypes"
              :key="subjectType.id"
              :label="subjectType.name"
              :value="subjectType.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="考试类型">
          <el-select v-model="query.exaType" clearable>
            <el-option
              v-for="item in testType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="试卷状态">
          <el-select v-model="query.status" clearable>
            <el-option label="编辑" value="0" />
            <el-option label="校验中" value="3" />
            <el-option label="审核中" value="4" />
            <el-option label="已审核" value="5" />
            <el-option label="上线" value="1" />
            <el-option label="下线" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="抽检状态">
          <el-select v-model="query.qualifiedStatus" clearable>
            <el-option label="未抽检" value="0" />
            <el-option label="抽检中" value="1" />
            <el-option label="不合格" value="2" />
            <el-option label="合格" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName === '1'" label="编辑状态">
          <el-select v-model="query.editStatus" clearable>
            <el-option label="暂存" value="0" />
            <el-option label="提交" value="1" />
            <el-option label="驳回" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-else-if="activeName === '2'" label="校验状态">
          <el-select v-model="query.checkStatus" clearable>
            <el-option label="暂存" value="0" />
            <el-option label="提交" value="1" />
            <el-option label="驳回" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-else-if="activeName === '3'" label="审核状态">
          <el-select v-model="query.reviewStatus" clearable>
            <el-option label="暂存" value="0" />
            <el-option label="已审核" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker
            v-model="query.year"
            value-format="yyyy"
            type="year"
            placeholder="选择年份"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            plain
            @click="getTestList()"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="query = { pageNo: 1, pageSize: 20, total: 0 }"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px">
        <el-button
          v-if="activeName === '2'"
          size="mini"
          class="filter-item"
          type="danger"
          @click="rejectCheckMultiple"
        >
          批量驳回
        </el-button>
        <el-button
          v-if="activeName === '1'"
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
        >
          <router-link to="/testInfo">创建试卷</router-link>
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 10px"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="activeName === '2'"
        :selectable="selectEnable"
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column align="center" label="试卷编号" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="200px"
        :show-overflow-tooltip="true"
        align="center"
        label="标题"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="50" align="center" label="年份">
        <template slot-scope="scope">
          <span>{{ scope.row.year }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type === 0 ? "内部" : "公开" }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="考试类型">
        <template slot-scope="scope">
          <span>{{ scope.row.exaType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        align="center"
        label="试卷状态"
        width="140px"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row | tag">{{ scope.row | status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="activeName === '1'"
        class-name="status-col"
        align="center"
        label="编辑状态"
        width="110px"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.editStatus === 0" type="info">暂存</el-tag>
          <el-tag v-else-if="scope.row.editStatus === 1" type="success"
            >已提交</el-tag
          >
          <el-tag v-else type="danger">
            {{ scope.row.qualifiedStatus == "2" ? "抽检" : "校对" }}被驳回
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="activeName === '2'"
        class-name="status-col"
        align="center"
        label="校验状态"
        width="110px"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.checkStatus === 0" type="info">暂存</el-tag>
          <el-tag v-else-if="scope.row.checkStatus === 1" type="success"
            >已提交</el-tag
          >
          <el-tag v-else type="danger">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="activeName === '3'"
        class-name="status-col"
        align="center"
        label="审核状态"
        width="110px"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.reviewStatus === 0" type="info">暂存</el-tag>
          <el-tag v-else-if="scope.row.reviewStatus === 1" type="success"
            >已提交</el-tag
          >
          <el-tag v-else type="danger">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ctime | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="合格">
        <template slot-scope="scope">
          <span>{{
            scope.row.qualifiedStatus == "0"|| scope.row.qualifiedStatus == ""
              ? "无"
              : scope.row.qualifiedStatus == "1"
              ? "抽检中"
              : scope.row.qualifiedStatus == "2"
              ? "不合格"
              : "合格"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/testInfo',
              query: {
                id: scope.row.id,
              },
            }"
          >
            <el-button type="primary" size="mini">查看</el-button>
          </router-link>
          <el-button type="danger" @click="delTest(scope.row.id)" size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pageSize"
      :total="query.total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import { parseTime } from "@/utils/index";
import { testList, delTest, rejectCheckMultiple } from "@/api/test.js";
import { getSubjectTypeList } from "@/api/subjectType.js";
import { getTestTypeList } from "@/api/testType.js";

export default {
  name: "TestList",
  directives: { waves },
  filters: {
    parseTime(time) {
      return parseTime(time);
    },
    tag(row) {
      if (row.status === 1) {
        return "success";
      }
      if (row.editStatus !== 1) {
        return "info";
      }
      if (row.checkStatus !== 1) {
        return "warning";
      }
      if (row.reviewStatus === 1) {
        return "success";
      }
      return "";
    },
    status(row) {
      if (row.status === 1) {
        return "上线";
      }
      if (row.status === 0) {
        return row.editPeople + "-编辑中";
      }
      if (row.status == 3) {
        return row.checkPeople + "-校验中";
      }
      if (row.status == 4) {
        return row.reviewPeople + "-审核中";
      }
      if (row.status == 5) {
        return "已审核";
      }
      return "下线";
    },
  },
  data() {
    return {
      testType: [],
      subjectTypes: [],
      listLoading: false,
      list: [],
      selectIds: [],
      activeName: "1",
      query: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  watch: {
    activeName: function () {
      this.getTestList();
    },
  },
  created() {
    this.activeName = this.$store.getters.role === 1 ? "0" : "1";
    if (this.activeName === "1" && (this.$store.getters.permission & 1) <= 0) {
      this.activeName = "2";
    }
    if (this.activeName === "2" && (this.$store.getters.permission & 2) <= 0) {
      this.activeName = "3";
    }
    this.getTestList();
    this.getTestType();
    this.getSubjectType();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.qualifiedStatus == "1") {
        return "success-row";
      }
      return "";
    },
    getTestType() {
      getTestTypeList().then((res) => (this.testType = res.data));
    },
    getSubjectType() {
      getSubjectTypeList().then((res) => (this.subjectTypes = res.data));
    },
    getTestList() {
      this.listLoading = true;
      this.query.activeName = this.activeName;
      testList(this.query).then((res) => {
        this.list = res.data;
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getTestList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getTestList();
    },
    delTest(id) {
      this.$confirm("此操作将永久删除该试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delTest(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getTestList();
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((res) => res.id);
    },
    selectEnable(row, rowIndex) {
      return row.checkStatus == 0;
    },
    rejectCheckMultiple() {
      if (this.selectIds.length <= 0) {
        this.$message({
          message: "请选择需要驳回的试卷",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将驳回选中的试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rejectCheckMultiple(this.selectIds).then((res) => {
            this.$message({
              message: "驳回成功",
              type: "success",
            });
            this.getTestList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
 .el-table .success-row {
    color: #DCDFE6;
  }
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.page {
  margin-top: 10px;
}

.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
